<template>
  <div>
      <div class="userdetail" v-if="userData!=null">
    <div class="head">
      <div class="back" @click="back">
        <img src="../assets/img/back2.png" alt="" />
      </div>
      <div class="bgimg" :style="{ 'background-image': 'url(' + userData.avatar + ')' }"></div>
      <div class="name">{{userData.username}}</div>
      <div class="occupation">{{userData.occupation}}.{{userData.loaction?userData.location.province.name:''}}</div>
      <div class="introduction"><p>{{userData.verify_description==''?'暂时简介':userData.verify_description}}</p></div>
      <div class="like">
        <div class="num">
          <h3>{{userData.count.count_popularity |num}}</h3>
          <p>人气</p>
        </div>
        <div class="num">
          <h3>{{userData.is_freelancer?userData.count.count_follower+1:userData.count.count_follower |num}}</h3>
          <p>粉丝</p>
        </div>
        <div class="num">
          <h3>{{userData.count.count_followee}}</h3>
          <p>关注</p>
        </div>
        <div class="gzhu" v-if="!userData.is_vmovier_migrate_user">
          <p>关注</p>
          
        </div>
        <div class="gzhu"  v-if="userData.is_vmovier_migrate_user">
         <p>已关注</p>
        </div>
      </div>
    </div>
    <div class="bgcover"></div>
    <div class="content">
      <van-tabs v-model="active" animated sticky title-active-color="red">
        <van-tab :title="'作品'">
          <div v-if="userArticles!=null">
          <div class="box1" v-for="item in userArticles" :key="item.id">
            <div class="searchlist_content">
              
              <div class="box">
                <div class="left">
                  <div class="time">{{item.resource.duration|playerTime}}</div>
                 
                  <span><img :src="item.resource.cover" alt="" /></span>
                </div>
                <div class="right">
                  <p>{{item.resource.title}}</p>
                  <h4>
                    播放量{{item.resource.count.count_view|num}}喜欢{{item.resource.count.count_like}}
                  </h4>
                 
                </div>
              </div>
            </div>
          </div>
          </div>
          <div v-else class="none">暂无作品</div>
        </van-tab>
        <van-tab :title="'收藏夹'">
          <div class="collect">
            <p>收藏作品未公开</p>
          </div>
        </van-tab>
        <van-tab :title="'喜欢'">
          <div class="bigCartTop" v-if="userApproved!=null">
            <div class="contentkk" v-for="item in userApproved" :key="item.resource.id" >
              <div class="head">
                <div class="left">
                  <div class="heads"  
            :style="{ 'background-image': 'url(' + item.resource.author.userinfo.avatar + ')' }" >
             
            </div>
                  <div class="vip">
                    <img src="../assets/img/O_1.png" alt="" />
                  </div>
                  <div class="name"></div>
                </div>
                <div class="right">
                  <!-- <div class="gzhu" v-if="userData.is_freelancer">
                    <img src="../assets/img/add.png" alt="" />
                    <span>关注</span>
                  </div> -->
                  <!-- <div class="havegzhu" v-if="!userData.is_freelancer">
                   <span>已关注</span>
                 </div> -->
                  <div class="share">
                    <img src="../assets/img/Zk1.png" alt="" />
                  </div>
                </div>
              </div>
              <div class="title">
                <p>{{item.resource.title}}</p>
              </div>
              <div class="cover">
                <img :src="item.resource.cover" alt="" />
              </div>
              <div class="looknum">
                <p>{{item.resource.count.count_view|num}}观看 | {{item.resource.duration|playerTime}}</p>
              </div>
              <div class="bar">
                <div class="collection">
                  <img src="../assets/img/28.png" alt="" />
                  <span>{{item.resource.count.count_collect|playCountNum}}</span>
                </div>
                <div class="comments">
                  <img src="../assets/img/Ac1.png" alt="" />
                  <span>{{item.resource.count.count_comment}}</span>
                </div>
                <div class="likes">
                  <img src="../assets/img/like.png" alt="" />
                  <span>{{item.resource.count.count_like}}</span>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="none">暂无喜欢作品</div>
          
        </van-tab>
        <van-tab :title="'资料'">
          <div class="Information">
            <div class="header">基本资料</div>
            <div class="middle">
              <span class="con"> 性别 </span>
              <span>{{userData.sex==2?'女':'男'}}</span>
            </div>
            <div class="middle">
              <span class="con"> 年龄 </span>
              <span>男</span>
            </div>
            <div class="middle">
              <span class="con"> 所在地区 </span>
              <span v-if="userData.location">{{userData.location.province.name}}</span>
              <span v-else>未知</span>
            </div>
            <div class="middle1">
              <span class="con1"> 简介 </span>
              <span>{{userData.about==''?'TA还没留下什么信息':userData.about}}</span>
            </div>
            <div class="middle">
              <span class="con"> IP归属地</span>
              <span >{{userData.ip_location==''?'未知':userData.ip_location}}</span>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
     </div>
    <van-loading size="40px"  v-if="flag">加载中...</van-loading>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      id: null,
      active: 2,
      userData: null,
      userArticles:null,
      userApproved:null,
      flag:true
    };
  },
  methods: {
     back(){
   this.$router.go(-1)
     },

    // https://apis.netstart.cn/xpc/user/13139418  用户主页
    getUseritem(id) {
      axios.get("https://apis.netstart.cn/xpc/user/"+id).then((data) => {
        this.userData = data.data.data
        console.log(this.userData,'用户主页');
        let tempgz =JSON.parse(window.localStorage.getItem('isgz'))
        if (tempgz!=null) {
           let index=tempgz.findIndex(item=>item.children[0].model.resource.user_id==id)
           if (index!=-1) {
            console.log('有相同的');
              this.userData.is_vmovier_migrate_user=true
           }else{
              this.userData = data.data.data
           }
           
        }
        if (data) {
           this.flag=false
        }
      });
    },
    // https://apis.netstart.cn/xpc/user/11034617/articles  用户作品
    getArticles(id){
      axios.get("https://apis.netstart.cn/xpc/user/"+id+"/articles").then((data) => {
        if (data.data.data.list.length>0) {
          this.userArticles =data.data.data.list
        }
        console.log(this.userArticles ,'用户作品');
      });
    },
      // https://apis.netstart.cn/xpc/user/10121307/articles-approved  用户喜欢
      getApproved(id){
      axios.get("https://apis.netstart.cn/xpc/user/"+id+"/articles-approved").then((data) => {
       if (data.data.data.list.length>0) {
         this.userApproved =data.data.data.list
       }
        console.log(this.userApproved,'用户喜欢');
      });
    }
  },
  created() {
    this.id = this.$route.query.id;
    // console.log(this.id);
    this.getUseritem(this.id);
    this.getArticles(this.id)
    this.getApproved(this.id)
  },
   filters:{
   
      playerTime(data) {
          let m = parseInt(data / 60); //分钟
          let s = parseInt(data % 60); //秒
        
        return (m >10? m: "0" + m) +"'"+ (s <10 ? "0" + s : s)+"''"; 
         
       },  
       num(value){
         if (value<10000) {
           return value
         }
         let w =value/10000
         return  Number(w).toFixed(1) +'w'
     },
      playCountNum(value){ //134567897
                if(value < 1000){
                    return value;
                }                      // 1.200    12.000  
                let k = value > 1000?value/1000:value;//千计算
                let w = k > 10? (k/10).toFixed(1) +"w" :(k).toFixed(1) +"k";//万计算

                return w;
            },
             
   }
};
</script>

<style lang="less" scoped>
  .van-loading{
        position: fixed;
       top: 130px;
        left: 35%;
        z-index: 999;
    }
.userdetail {
  min-height: 667px;
  background-color: #f7f7f7;
  .head {
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    .back {
      padding: 10px 0px;
      img {
        width: 30px;
      }
    }
    .bgimg {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 2px solid #fff;
      background-repeat: no-repeat;
      background-size: cover;

    }
    .name {
      color: #fff;
      font-size: 18px;
      padding: 10px 0px;
    }
    .occupation {
      color: #e3d8d8;
      font-size: 12px;
      padding: 5px 0px;
    }
    .introduction {
      color: #e3d8d8;
      font-size: 12px;
      height: 30px;
      padding: 5px 0px;
      p{
        width: 40%;
           text-overflow:ellipsis;
      overflow: hidden;
      display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2; 
      }
    }
    .like {
      padding: 20px 0px;
      display: flex;
      justify-content: space-around;
      .num {
        text-align: center;
        h3 {
          color: #fff;
          font-weight: 600;
          font-size: 14px;
        }
        p {
          color: gray;
          font-size: 13px;
        }
      }
      .gzhu {
        p {
          padding: 5px 20px;
          background-color: red;
          color: #fff;
          border-radius: 15px;
          font-size: 14px;
        }
      }
    }
  }
  .bgcover {
    width: 100%;
    top: 0px;
    height: 285px;
    position: absolute;
    background-image: url(../assets/img/69.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
  }
  .content {
    .van-tabs__wrap {
      top: 0px;
      width: 100%;
    }
   
    .box1 {
      background-color: #fff;
      .searchlist_content {
        width: 90%;
        margin: 0 auto;
        background-color: #fff;
        .box {
          display: flex;
          justify-content: space-between;
          padding: 10px 0px;
          border-bottom: 1px solid #f2f2f2;

          align-items: center;
          .left {
            width: 48%;
            position: relative;
            .time {
              position: absolute;
              bottom: 8px;
              left: 115px;
              color: #fff;
              font-size: 12px;
            }
            span {
              width: 100%;
              display: block;
              border-radius: 5px;
              overflow: hidden;
              img {
                width: 100%;
                height: 90px;
              }
            }
          }
          .right {
            width: 48%;
            h4 {
              padding: 15px 0px;
              font-size: 10px;
            }
            p {
              font-size: 13px;
              font-weight: 600;
            }
            .name {
              font-size: 12px;
              color: gray;
              line-height: 20px;
              display: flex;
              span {
                display: inline-block;
                margin-right: 8px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                // background-image: url(../assets/img/test.png);
                background-repeat: no-repeat;
                background-size: cover;
              }
            }
          }
        }
      }
    }
    .collect {
      height: 350px;
      background-color: #fff;
      color: gray;
      text-align: center;
      font-size: 14px;
      p {
        padding-top: 100px;
      }
    }
    .bigCartTop {
      width: 95%;
      margin: 0 auto;
      margin-bottom: 60px;
      .contentkk {
        width: 100%;
        margin: 10px auto;
      border: 1px solid #f2f2f2;
        overflow: hidden;
        border-radius: 8px;
        background-color: rgb(255, 255, 255);
        position: relative;
        .head {
          width: 100%;
          background-color: #fff;

          display: flex;
          justify-content: space-between;
          padding: 10px 0px;
          border-bottom: 2px solid #f2f2f2;
          .left {
            display: flex;
            align-items: center;
            position: relative;
            width: 50%;
            .heads {
              border-radius: 50%;
              // background-image: url(../assets/img/test.png);
              width: 30px;
              height: 30px;
              background-size: cover;
              background-repeat: no-repeat;
              margin-right: 10px;
              margin-left: 10px;
            }
            .vip {
              position: absolute;
              top: 18px;
              left: 30px;
              img {
                width: 12px;
              }
            }
            .name {
              font-size: 13px;
              font-weight: 600;
            }
          }
          .right {
            display: flex;
            align-items: center;
            .gzhu {
              display: flex;
              align-items: center;
              padding: 1px 12px;
              margin-right: 20px;

              border-radius: 15px;

              img {
                width: 8px;
                height: 8px;
                margin-right: 5px;
              }
              span {
                font-size: 14px;
                color: salmon;
              }
            }
            .havegzhu {
              padding: 1px 12px;
              margin-right: 20px;
              border: 1px solid f2f2f2;
              border-radius: 15px;

              span {
                font-size: 14px;
                color: gray;
              }
            }
            .share {
              margin-right: 10px;
              img {
                width: 15px;
                height: 15px;
              }
            }
          }
        }
        .title {
          padding: 10px 0px;
          padding-left: 10px;
          p {
            font-weight: 600;
            font-size: 14px;
          }
        }
        .cover {
          width: 100%;

          img {
            width: 100%;
            height: 200px;
          }
        }
        .looknum {
          position: absolute;
          bottom: 50px;
          right: 15px;
          z-index: 50;
          p {
            text-align: end;
            color: #fffcfc;
            font-size: 14px;
          }
        }
        .bar {
          display: flex;
          justify-content: space-around;
          padding: 10px 0px;
          .collection,
          .comments,
          .likes {
            display: flex;
            align-items: center;
            span {
              display: block;
              color: gray;
              font-size: 14px;
            }
            img {
              width: 15px;
              margin-right: 10px;
            }
          }
        }
      }
    }
    .none{
      background-color: #fff;
      height: 330px;
      box-sizing: border-box;
      padding-top: 100px;
      width: 100%;
      text-align: center;
      color: gray;
    }
    .Information {
      background-color:#fff;
      width: 90%;
      margin: 0 auto;
     padding: 18px;
     min-height: 296px;
      .header {
        color: black;
        font-size: 14px;
        padding: 5px 0px;
      }
      .middle {
        padding: 10px 0px;
        span {
            color: black;
           font-size: 12px;
        }
        .con {
          color: gray;
          font-size: 12px;
          display: inline-block;
          width: 30%;
        }
      }
      .middle1{
        display: flex;
        span{
           display: block;
            color: black;
           font-size: 12px;
           width: 57%;
        }
        .con1{
          width: 29%;
          color: gray;
          font-size: 12px;
          display: inline-block;
        }
      }
    }
  }

  //  .van-tabs__wrap{
  //             position: sticky;
  //             top: 0px;
  //         }
}
</style>